<template>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="searchQuery" placeholder="搜索班级、学号/学生姓名" prefix-icon="el-icon-search"
        class="search-input"></el-input>
      <!-- 筛选项 -->
      <div class="filters">
        <el-select v-model="selectedClass" placeholder="请选择班级" class="filter-select">
          <el-option v-for="classOption in classOptions" :key="classOption.value" :label="classOption.label"
            :value="classOption.value" />
        </el-select>
        <el-select v-model="selectedStudent" placeholder="请选择学生" class="filter-select">
          <el-option v-for="student in studentOptions" :key="student.value" :label="student.label"
            :value="student.value" />
        </el-select>
      </div>
      <!-- 全屏按钮 -->
      <el-button icon="FullScreen" circle class="fullscreen-button" @click="toggleFullScreen" />
    </div>

    <!-- 主内容区域 -->
    <div class="content-area" :class="{ 'fullscreen': isFullScreen }">
      <studentProfiles :selected-student-id="selectedStudent" :selected-class-name="selectedClassName" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { getClassData, getStudentData } from '../../api/api';
import studentProfiles from '../../components/echartProfiles/student/studentProfiles.vue';

const searchQuery = ref('');
const selectedClass = ref(null);
const selectedStudent = ref(null);

const classOptions = ref([]);
const studentOptions = ref([]);
const isFullScreen = ref(false); // 用于控制全屏状态

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 切换全屏状态
const toggleFullScreen = () => {
  if (!isFullScreen.value) {
    // 进入全屏
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) { // Firefox
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari 和 Opera
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
      document.documentElement.msRequestFullscreen();
    }
    document.body.style.overflow = 'hidden';
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari 和 Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
    document.body.style.overflow = '';
  }
  isFullScreen.value = !isFullScreen.value; // 切换全屏状态
};

// 请求数据并更新状态
const fetchData = async () => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }


    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    // console.log('Request headers:', headers);  // 打印请求头，确保包含 token

    // 获取班级数据
    const response = await getClassData(headers);

    // console.log('response:', response);

    const classData = response.data.data.data; // 这里获取实际的返回数据

    // console.log('classData:', classData);  // 打印 classData 的结构

    if (!classData || classData.code === 401) {
      console.error('用户未登录');
      return;
    }

    // 构造班级选项
    classOptions.value = classData.map((item) => ({
      value: item.ClassID,
      label: item.className,
      students: item.students, // 保存学生列表
    }));

    // 如果有班级，默认选中第一个班级并加载其学生数据
    if (classOptions.value.length > 0) {
      selectedClass.value = classOptions.value[0].value; // 默认选中第一个班级
      studentOptions.value = classOptions.value[0].students.map((student) => ({
        value: student.StudentID,
        label: student.Name,
      }));
    }

  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 计算属性获取班级名称
const selectedClassName = computed(() => {
  const selected = classOptions.value.find((option) => option.value === selectedClass.value);
  return selected ? selected.label : '';
});

// 监听 selectedClass 的变化，动态更新学生选项
watch(selectedClass, (newClassId) => {
  const selected = classOptions.value.find((option) => option.value === newClassId);
  if (selected && selected.students) {
    studentOptions.value = selected.students.map((student) => ({
      value: student.StudentID,
      label: student.Name,
    }));
  } else {
    studentOptions.value = []; // 如果没有学生，清空选项
  }
});


// 组件挂载时请求数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f5f7fa;
  height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #dcdfe6;
}

.search-input {
  flex: 1;
  margin-right: 20px;
}

.filters {
  display: flex;
  gap: 15px;
  margin-right: 20px;
}

.filter-select {
  width: 300px;
}

.fullscreen-button {
  background-color: transparent;
}

.content-area {
  flex: 1;
  min-width: 1024px;
  max-width: 1920px;
  background: url("../../assets/profilePage/bg.png") top center;
  margin-top: 20px;
  border-radius: 4px;
  transition: all 0.3s;
  scroll-behavior: smooth;
}

.content-area.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: url("../../assets/profilePage/bg.png") top center;
  border-radius: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
